<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展丞信件箱 - 狐兔主题博客</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --pink: #ffb6c1;
            --light-pink: #ffeef2;
            --green: #98fb98;
            --light-green: #f0fff0;
            --dark-green: #7ccd7c;
            --dark-pink: #ff91a4;
            --text-dark: #333;
            --text-light: #666;
            --shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, var(--light-pink), var(--light-green));
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--pink), var(--green));
            padding: 2rem;
            color: white;
            position: relative;
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .animal-icon {
            font-size: 3rem;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
        }
        
        .logo h1 {
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        .user-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .auth-buttons {
            display: flex;
            gap: 1rem;
        }
        
        .btn {
            padding: 0.5rem 1.5rem;
            border: 2px solid white;
            background: transparent;
            color: white;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }
        
        .btn:hover {
            background: white;
            color: var(--dark-green);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: white;
        }
        
        .nav {
            display: flex;
            gap: 2rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .nav-btn {
            padding: 0.8rem 2rem;
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }
        
        .nav-btn.active,
        .nav-btn:hover {
            background: white;
            color: var(--dark-green);
            transform: translateY(-2px);
        }
        
        /* 主内容区 */
        .main-content {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 0;
            min-height: 600px;
        }
        
        .content-section {
            padding: 2rem;
        }
        
        .sidebar {
            padding: 2rem;
            background: var(--light-pink);
            border-left: 3px solid var(--pink);
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
            font-weight: bold;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 1rem;
            border: 2px solid var(--pink);
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--dark-green);
            box-shadow: 0 0 0 3px rgba(152, 251, 152, 0.3);
        }
        
        textarea {
            height: 200px;
            resize: vertical;
            line-height: 1.6;
        }
        
        .privacy-options {
            display: flex;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        
        .privacy-btn {
            flex: 1;
            padding: 1rem;
            border: 2px solid var(--pink);
            background: white;
            border-radius: 15px;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .privacy-btn.active {
            background: var(--pink);
            color: white;
        }
        
        .submit-btn {
            width: 100%;
            padding: 1rem;
            background: var(--green);
            color: white;
            border: none;
            border-radius: 15px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .submit-btn:hover {
            background: var(--dark-green);
            transform: translateY(-2px);
        }
        
        /* 信件列表样式 */
        .search-box {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .search-input {
            flex: 1;
        }
        
        .filter-select {
            width: 150px;
        }
        
        .letters-grid {
            display: grid;
            gap: 1.5rem;
        }
        
        .letter-item {
            background: white;
            padding: 1.5rem;
            border-radius: 15px;
            border-left: 5px solid var(--green);
            box-shadow: var(--shadow);
            transition: all 0.3s;
            position: relative;
        }
        
        .letter-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .letter-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }
        
        .letter-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--dark-green);
            margin-right: 1rem;
        }
        
        .letter-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        .letter-actions {
            display: flex;
            gap: 0.5rem;
            position: absolute;
            top: 1rem;
            right: 1rem;
        }
        
        .action-btn {
            padding: 0.3rem 0.6rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.3s;
        }
        
        .edit-btn {
            background: var(--light-green);
            color: var(--dark-green);
        }
        
        .delete-btn {
            background: var(--light-pink);
            color: var(--dark-pink);
        }
        
        .privacy-badge {
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        .public-badge {
            background: var(--light-green);
            color: var(--dark-green);
        }
        
        .private-badge {
            background: var(--light-pink);
            color: var(--dark-pink);
        }
        
        .letter-content {
            line-height: 1.7;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }
        
        .letter-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid #eee;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* 侧边栏样式 */
        .animal-illustration {
            text-align: center;
            font-size: 4rem;
            margin: 1rem 0;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
        }
        
        .feature-list {
            list-style: none;
            margin: 1.5rem 0;
        }
        
        .feature-list li {
            padding: 0.8rem 0;
            border-bottom: 1px solid var(--pink);
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        
        .stat-card {
            background: white;
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            box-shadow: var(--shadow);
        }
        
        .stat-number {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--dark-green);
            display: block;
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: var(--text-light);
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: var(--shadow);
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            .sidebar {
                border-left: none;
                border-top: 3px solid var(--pink);
            }
            
            .header-top {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav {
                gap: 0.5rem;
            }
            
            .nav-btn {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
            }
            
            .search-box {
                flex-direction: column;
            }
            
            .filter-select {
                width: 100%;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        
        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="header-top">
                <div class="logo">
                    <div class="animal-icon">🦊</div>
                    <h1>展丞信件箱</h1>
                    <div class="animal-icon">🐰</div>
                </div>
                <div class="user-section">
                    <div id="authButtons" class="auth-buttons">
                        <button class="btn" onclick="showModal('loginModal')"><i class="fas fa-sign-in-alt"></i> 登录</button>
                        <button class="btn" onclick="showModal('registerModal')"><i class="fas fa-user-plus"></i> 注册</button>
                    </div>
                    <div id="userInfo" class="user-info hidden">
                        <span id="usernameDisplay"></span>
                        <button class="btn" onclick="logout()"><i class="fas fa-sign-out-alt"></i> 退出</button>
                    </div>
                </div>
            </div>
            
            <nav class="nav">
                <button class="nav-btn active" onclick="showView('public')"><i class="fas fa-inbox"></i> 公开信箱</button>
                <button class="nav-btn" onclick="showView('write')"><i class="fas fa-edit"></i> 写封信</button>
                <button class="nav-btn" onclick="showView('myLetters')"><i class="fas fa-envelope"></i> 我的信件</button>
                <button class="nav-btn" onclick="showView('search')"><i class="fas fa-search"></i> 搜索信件</button>
            </nav>
        </header>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="content-section">
                <!-- 写信件视图 -->
                <div id="writeView" class="view hidden">
                    <h2><i class="fas fa-edit"></i> 写下你的信件</h2>
                    <div class="form-group">
                        <input type="text" id="letterTitle" placeholder="给信件起个标题...">
                    </div>
                    <div class="form-group">
                        <textarea id="letterContent" placeholder="在这里写下你的心情、想法或故事..."></textarea>
                    </div>
                    
                    <div class="privacy-options">
                        <div class="privacy-btn active" data-privacy="public">
                            <i class="fas fa-globe-americas"></i>
                            公开信
                        </div>
                        <div class="privacy-btn" data-privacy="private">
                            <i class="fas fa-lock"></i>
                            私密信
                        </div>
                    </div>
                    
                    <button class="submit-btn" onclick="saveLetter()">
                        <i class="fas fa-paper-plane"></i>
                        寄出信件
                    </button>
                </div>

                <!-- 公开信箱视图 -->
                <div id="publicView" class="view">
                    <h2><i class="fas fa-inbox"></i> 公开信箱</h2>
                    <div class="letters-grid" id="publicLettersContainer">
                        <!-- 公开信件会动态显示在这里 -->
                    </div>
                </div>

                <!-- 我的信件视图 -->
                <div id="myLettersView" class="view hidden">
                    <h2><i class="fas fa-envelope"></i> 我的信件</h2>
                    <div class="letters-grid" id="myLettersContainer">
                        <!-- 用户信件会动态显示在这里 -->
                    </div>
                </div>

                <!-- 搜索视图 -->
                <div id="searchView" class="view hidden">
                    <h2><i class="fas fa-search"></i> 搜索信件</h2>
                    <div class="search-box">
                        <input type="text" id="searchInput" placeholder="搜索信件内容..." class="search-input">
                        <select id="privacyFilter" class="filter-select">
                            <option value="all">所有类型</option>
                            <option value="public">公开信</option>
                            <option value="private">私密信</option>
                        </select>
                    </div>
                    <div class="letters-grid" id="searchResultsContainer">
                        <!-- 搜索结果会动态显示在这里 -->
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="sidebar">
                <div class="animal-illustration">
                    🦊❤️🐰
                </div>
                <h3>欢迎来到展丞信件箱</h3>
                <p>狐狸的智慧与兔子的温柔在此相遇，守护你的每一段文字。</p>
                
                <ul class="feature-list">
                    <li><i class="fas fa-pencil-alt"></i> 自由书写长篇信件</li>
                    <li><i class="fas fa-user-lock"></i> 隐私保护设置</li>
                    <li><i class="fas fa-palette"></i> 舒适粉绿配色</li>
                    <li><i class="fas fa-paw"></i> 狐兔主题陪伴</li>
                    <li><i class="fas fa-search"></i> 智能搜索功能</li>
                    <li><i class="fas fa-mobile-alt"></i> 全平台适配</li>
                </ul>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <span class="stat-number" id="totalLettersCount">0</span>
                        <span class="stat-label">总信件数</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number" id="publicLettersCount">0</span>
                        <span class="stat-label">公开信件</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number" id="privateLettersCount">0</span>
                        <span class="stat-label">私密信件</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number" id="usersCount">0</span>
                        <span class="stat-label">注册用户</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content fade-in">
            <div class="modal-header">
                <h3><i class="fas fa-sign-in-alt"></i> 用户登录</h3>
                <button class="close-btn" onclick="closeModal('loginModal')">&times;</button>
            </div>
            <div class="form-group">
                <input type="text" id="loginUsername" placeholder="用户名">
            </div>
            <div class="form-group">
                <input type="password" id="loginPassword" placeholder="密码">
            </div>
            <button class="submit-btn" onclick="login()">登录</button>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content fade-in">
            <div class="modal-header">
                <h3><i class="fas fa-user-plus"></i> 用户注册</h3>
                <button class="close-btn" onclick="closeModal('registerModal')">&times;</button>
            </div>
            <div class="form-group">
                <input type="text" id="registerUsername" placeholder="设置用户名">
            </div>
            <div class="form-group">
                <input type="email" id="registerEmail" placeholder="邮箱地址">
            </div>
            <div class="form-group">
                <input type="password" id="registerPassword" placeholder="设置密码">
            </div>
            <button class="submit-btn" onclick="register()">注册</button>
        </div>
    </div>

    <script>
        // 数据管理
        let currentUser = JSON.parse(localStorage.getItem('currentUser')) || null;
        let users = JSON.parse(localStorage.getItem('foxRabbitUsers')) || [];
        let letters = JSON.parse(localStorage.getItem('foxRabbitLetters')) || [];
        let currentPrivacy = 'public';
        let currentView = 'public';

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            initApp();
            setupEventListeners();
            updateStats();
            loadPublicLetters();
        });

        function initApp() {
            // 检查登录状态
            if (currentUser) {
                showUserInfo();
            }
            
            // 设置隐私选项
            setupPrivacyOptions();
        }

        function setupEventListeners() {
            // 搜索功能
            document.getElementById('searchInput').addEventListener('input', performSearch);
            document.getElementById('privacyFilter').addEventListener('change', performSearch);
        }

        function setupPrivacyOptions() {
            document.querySelectorAll('.privacy-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.privacy-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    currentPrivacy = this.dataset.privacy;
                });
            });
        }

        // 用户认证功能
        function register() {
            const username = document.getElementById('registerUsername').value.trim();
            const email = document.getElementById('registerEmail').value.trim();
            const password = document.getElementById('registerPassword').value.trim();

            if (!username || !email || !password) {
                alert('请填写所有字段！');
                return;
            }

            // 检查用户是否已存在
            if (users.find(user => user.username === username)) {
                alert('用户名已存在！');
                return;
            }

            if (users.find(user => user.email === email)) {
                alert('邮箱已被注册！');
                return;
            }

            const newUser = {
                id: Date.now(),
                username: username,
                email: email,
                password: password, // 实际项目中应该加密
                createdAt: new Date().toISOString()
            };

            users.push(newUser);
            localStorage.setItem('foxRabbitUsers', JSON.stringify(users));
            
            closeModal('registerModal');
            alert('注册成功！请登录。');
            showModal('loginModal');
        }

        function login() {
            const username = document.getElementById('loginUsername').value.trim();
            const password = document.getElementById('loginPassword').value.trim();

            const user = users.find(u => u.username === username && u.password === password);
            
            if (user) {
                currentUser = user;
                localStorage.setItem('currentUser', JSON.stringify(currentUser));
                closeModal('loginModal');
                showUserInfo();
                alert(`欢迎回来，${username}！`);
                loadMyLetters();
            } else {
                alert('用户名或密码错误！');
            }
        }

        function logout() {
            currentUser = null;
            localStorage.removeItem('currentUser');
            hideUserInfo();
            alert('已退出登录！');
            showView('public');
        }

        function showUserInfo() {
            document.getElementById('authButtons').classList.add('hidden');
            document.getElementById('userInfo').classList.remove('hidden');
            document.getElementById('usernameDisplay').textContent = currentUser.username;
        }

        function hideUserInfo() {
            document.getElementById('authButtons').classList.remove('hidden');
            document.getElementById('userInfo').classList.add('hidden');
        }

        // 信件管理功能
        function saveLetter() {
            if (!currentUser) {
                alert('请先登录！');
                showModal('loginModal');
                return;
            }

            const title = document.getElementById('letterTitle').value.trim() || '无标题信件';
            const content = document.getElementById('letterContent').value.trim();

            if (!content) {
                alert('请填写信件内容！');
                return;
            }

            const newLetter = {
                id: Date.now(),
                title: title,
                content: content,
                author: currentUser.username,
                authorId: currentUser.id,
                privacy: currentPrivacy,
                createdAt: new Date().toLocaleString('zh-CN'),
                updatedAt: new Date().toLocaleString('zh-CN')
            };

            letters.unshift(newLetter);
            localStorage.setItem('foxRabbitLetters', JSON.stringify(letters));

            // 清空表单
            document.getElementById('letterTitle').value = '';
            document.getElementById('letterContent').value = '';

            updateStats();
            showView('myLetters');
            alert(`信件已成功保存！(${currentPrivacy === 'public' ? '公开信' : '私密信'})`);
        }

        function editLetter(letterId) {
            const letter = letters.find(l => l.id === letterId);
            if (!letter) return;

            document.getElementById('letterTitle').value = letter.title;
            document.getElementById('letterContent').value = letter.content;
            currentPrivacy = letter.privacy;

            // 更新隐私按钮状态
            document.querySelectorAll('.privacy-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.privacy === letter.privacy);
            });

            // 删除原信件
            letters = letters.filter(l => l.id !== letterId);
            localStorage.setItem('foxRabbitLetters', JSON.stringify(letters));

            showView('write');
        }

        function deleteLetter(letterId) {
            if (!confirm('确定要删除这封信吗？此操作不可恢复。')) {
                return;
            }

            letters = letters.filter(l => l.id !== letterId);
            localStorage.setItem('foxRabbitLetters', JSON.stringify(letters));

            updateStats();
            loadCurrentView();
            alert('信件已删除！');
        }

        // 视图管理
        function showView(viewName) {
            // 隐藏所有视图
            document.querySelectorAll('.view').forEach(view => {
                view.classList.add('hidden');
            });
            
            // 更新导航按钮状态
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('active');
            });

            // 显示目标视图
            document.getElementById(viewName + 'View').classList.remove('hidden');
            event.target.classList.add('active');
            
            currentView = viewName;
            loadCurrentView();
        }

        function loadCurrentView() {
            switch (currentView) {
                case 'public':
                    loadPublicLetters();
                    break;
                case 'myLetters':
                    loadMyLetters();
                    break;
                case 'search':
                    performSearch();
                    break;
            }
        }

        function loadPublicLetters() {
            const container = document.getElementById('publicLettersContainer');
            const publicLetters = letters.filter(letter => letter.privacy === 'public');
            
            displayLetters(publicLetters, container);
        }

        function loadMyLetters() {
            if (!currentUser) {
                document.getElementById('myLettersContainer').innerHTML = 
                    '<div class="letter-item"><div class="letter-content" style="text-align: center; color: #666;">请先登录查看您的信件</div></div>';
                return;
            }

            const container = document.getElementById('myLettersContainer');
            const userLetters = letters.filter(letter => letter.authorId === currentUser.id);
            
            displayLetters(userLetters, container, true);
        }

        function performSearch() {
            const query = document.getElementById('searchInput').value.toLowerCase();
            const privacyFilter = document.getElementById('privacyFilter').value;
            const container = document.getElementById('searchResultsContainer');

            let filteredLetters = letters;

            // 应用隐私过滤
            if (privacyFilter !== 'all') {
                filteredLetters = filteredLetters.filter(letter => letter.privacy === privacyFilter);
            }

            // 应用搜索查询
            if (query) {
                filteredLetters = filteredLetters.filter(letter => 
                    letter.title.toLowerCase().includes(query) || 
                    letter.content.toLowerCase().includes(query) ||
                    letter.author.toLowerCase().includes(query)
                );
            }

            displayLetters(filteredLetters, container, currentUser !== null);
        }

        function displayLetters(lettersArray, container, showActions = false) {
            if (lettersArray.length === 0) {
                container.innerHTML = '<div class="letter-item"><div class="letter-content" style="text-align: center; color: #666;">没有找到信件</div></div>';
                return;
            }

            container.innerHTML = lettersArray.map(letter => `
                <div class="letter-item fade-in">
                    <div class="letter-header">
                        <div class="letter-title">${escapeHtml(letter.title)}</div>
                        <span class="privacy-badge ${letter.privacy === 'public' ? 'public-badge' : 'private-badge'}">
                            ${letter.privacy === 'public' ? '公开' : '私密'}
                        </span>
                    </div>
                    <div class="letter-meta">
                        <span><i class="fas fa-user"></i> ${escapeHtml(letter.author)}</span>
                        <span><i class="fas fa-clock"></i> ${letter.createdAt}</span>
                    </div>
                    <div class="letter-content">${escapeHtml(letter.content)}</div>
                    <div class="letter-footer">
                        <span>${letter.privacy === 'public' ? '所有人都可以看到' : '仅自己可见'}</span>
                        ${showActions && currentUser && currentUser.id === letter.authorId ? `
                            <div class="letter-actions">
                                <button class="action-btn edit-btn" onclick="editLetter(${letter.id})">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="action-btn delete-btn" onclick="deleteLetter(${letter.id})">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        ` : ''}
                    </div>
                </div>
            `).join('');
        }

        // 统计功能
        function updateStats() {
            const totalLetters = letters.length;
            const publicLetters = letters.filter(l => l.privacy === 'public').length;
            const privateLetters = letters.filter(l => l.privacy === 'private').length;
            const usersCount = users.length;

            document.getElementById('totalLettersCount').textContent = totalLetters;
            document.getElementById('publicLettersCount').textContent = publicLetters;
            document.getElementById('privateLettersCount').textContent = privateLetters;
            document.getElementById('usersCount').textContent = usersCount;
        }

        // 模态框功能
        function showModal(modalId) {
            document.getElementById(modalId).style.display = 'flex';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
            // 清空表单
            document.querySelectorAll(`#${modalId} input`).forEach(input => {
                input.value = '';
            });
        }

        // 工具函数
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.style.display = 'none';
            }
        }
    </script>
</body>
</html>